<template>
  <div class="header" @mouseleave="hideService({index:'3'})">
    <div class="nav">
      <img src="../../assets/images/logo.png" class="logo">
      <div class="navList">
        <div class="item"
             v-for="item in title"
             :class="{active : $route.path.indexOf(item.path) !== -1}"
             @mouseenter="showService(item.key)"
             @click="changeRouter(item.key)">
          {{item.value}}
        </div>
      </div>
      <div class="info">
        <div v-if="!$store.getters.getIsLogin">
          <el-link
                  :underline="false"
                  style="font-size: 16px"
                  @click="login">登录</el-link>
          <span>|</span>
          <el-link
                  :underline="false"
                  style="margin-left: 5px;font-size: 16px"
                  @click="register">注册</el-link>
        </div>
        <template v-else>
          <div style="margin-right: 30px" @click="toMessage">
            <el-badge :value="$store.getters.getMessageLength" class="item">
              <i class="el-icon-message-solid"></i>
            </el-badge>
          </div>
          <div style="display:flex;align-items: center;justify-content:center;width: 100px; height: 100%;font-size: 20px"
               @mouseenter="show = true"
               @mouseleave="show = false">
            <i class="el-icon-s-custom"
                style="margin-right: 10px"></i>
            {{$store.getters.getUserType == 'buyer' ? $store.getters.getInfo.ber_uname: $store.getters.getInfo.ser_name}}
            <transition name="el-zoom-in-top">
              <div v-show="show" class="transition-box">
               <div v-if="$store.getters.getUserType == 'buyer'"
                    @click="toServer(item.path)"
                    class="userCenter"
                    v-for="(item,index) in tab1">{{item.name}}</div>
                <div v-if="$store.getters.getUserType == 'server'"
                     @click="toServer(item.path)"
                     class="userCenter"
                     v-for="(item,index) in tab2">{{item.name}}
                </div>
              </div>
            </transition>
          </div>
        </template>
      </div>
    </div>

    <transition name="ease">
      <div class="showService" v-if="isShowService">
          <service-nav @hideService="hideService" @changCurrentIndex="change"/>
      </div>
    </transition>
  </div>
</template>

<script>
  import ServiceNav from "../content/ServiceNav";
  import axios from "axios";
  export default {
    name: "Header",
    components:{
      ServiceNav
    },
    computed:{
    },
    data(){
      return {
        title:[
            {key: '0',value:'首页',path:'/index'},
            {key: '1',value:'服务',path:'/service'},
        ],
        currentIndex:'0',
        isShowService:false,
        defaultAvatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        show : false,
        tab1:[{
          name:'账户管理',
          path:'/buyer/account'
        },
          {

            name: '我的订单',
            path: '/buyer/myOrder',

          },
          {
            name:'消息管理',
            path:'/buyer/message'
          },{
          name:'退出账号',
            path:'/'
          }],
        tab2:[  {
            name:'账户管理',
            path:'/server/account'
          },
          {
            name: '我的订单',
            path: '/server/myOrder',
          },
          {
            name: '订单中心',
            path: '/server/orderCenter',
          },
          {
            name:'消息管理',
            path:'/server/message'
          },
          {
            name:'退出账号',
            path:'/'
          }
        ]
      }
    },
    methods:{
      changeRouter(index){
        for(let i=0; i<this.title.length; i++)
        {
          if(this.title[i].key === index){
            this.$router.push(this.title[i].path)
          }
        }
        this.currentIndex = index
      },
      showService(index){
        if(index === '1' && this.currentIndex !== '1'){
          this.isShowService = true
        }
        else{
          this.isShowService = false
        }
      },
      hideService(obj){
        if(obj.index === '3'){
          this.isShowService = false
        }
        else if(obj.index === '1' && this.currentIndex !== '1'){
          this.isShowService = true
        }
      },
      change(obj){
        if(obj.change === true)
        {
          this.currentIndex = '1'
        }
      },
      login(){
        this.$router.push('/login')
      },
      register(){
        this.$router.push('/register')
      },
      toServer(path){
        if (path == '/'){
          sessionStorage.setItem('isLogin','0')
          sessionStorage.removeItem('userType')
          sessionStorage.removeItem('info')
          sessionStorage.removeItem('messageLength')
          this.$store.commit('setIsLogin',{isLogin:false})
          this.$store.commit('setUserType',{userType:''})
          this.$store.commit('setInfo',{info:{}})
          this.$store.commit('setMessageLength',{messageLength:0})
          this.$router.push('/login')
        }
        this.show = false
        this.$router.push(path)
      },
      toMessage(){
        if(this.$store.getters.getUserType == 'server'){
          this.$router.push('/server/message')
        }
        else{
          this.$router.push('/buyer/message')
        }
      }
    }
  }
</script>

<style scoped>
  .header{
    background-color: #fff;
  }
  .nav,.navList{
    display: flex;
  }

  .nav{
    /*box-sizing: border-box;*/
    /*width: 1500px;*/
    width: 100%;
    height: 80px;
    margin: 0 auto;
    /*background-color: #aceed8;*/
    border-bottom: 4px #084789 solid;
    align-items: center;
  }

  .logo{
    height: 80px;
    padding: 0;
  }

  .navList{
    width: 600px;
    height: 80px;
    padding-left: 40px;
    justify-content: flex-start;
    /*align-items: flex-end;*/
  }
  .navList .item{
    font-size: 25px;
    color: #333;
    width: 200px;
    height: 80px;
    line-height: 80px;
  }
  .navList .item:hover{
    cursor: pointer;
    color: #217ddc;
  }
  .navList .active{
    color: #217ddc;
  }
  a{
    text-decoration: none;
  }
  .info{
    flex: 1;
    padding-right: 40px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: right;
    height: 100%;
  }
  .el-link{
    margin-right: 6px;
  }
  .el-drawer{
    margin-top: 84px;
  }
  .showService{
    position: absolute;
    width: 100%;
    height: 100px;
    left: 50%;
    transform: translate(-50%,0);
    background-color: #409eff;
    overflow: hidden;
    z-index: 999;
  }
  .ease-enter,.ease-leave-to {
    height: 0; /*点击按钮页面即将被显示，此时div标签处于隐藏状态*/
  }
  .ease-enter-active,.ease-leave-active  {
    transition: height 500ms; /* 对该CSS样式进行transition的监控,有3s的过渡*/
  }

  .transition-box {
    position: absolute;
    right: 0;
    top: 80px;
    margin-bottom: 10px;
    width: 150px;
    border-radius: 4px;
    background-color: #125395;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    margin-right: 20px;
    padding: 10px 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
  }

  .userCenter{
    height: 50px;
    line-height: 50px;
  }

  .userCenter:hover {
    background-color: #0d5cad;
    cursor: pointer;
  }
</style>